import React, { PureComponent } from 'react'
import './index.css'

export default class Parent extends PureComponent {
  state = {
    carName: '奔驰',
  }

 /*  shouldComponentUpdate(nextProps, nextState) {
    console.log(this.props, this.state)
    console.log(nextProps, nextState)
    return !(this.state.carName === nextState.carName)
  } */

  changeCar = () => {
    /* const obj = this.state
    obj.carName = '迈巴赫'
    obj === this.state ==> true
    this.setState(obj)  // 不更新,进行了浅比较 */


    this.setState({ carName: '迈巴赫' })
    // this.setState({})
  }
  render() {
    console.log('parent - render()')
    return (
      <div className="parent">
        <h3>我是Parent组件</h3>
        <p>我的车: {this.state.carName}</p>
        <button onClick={this.changeCar}>点我换车</button>
        <Child carName={this.state.carName} />
        {/* <Child carName="奥拓" /> */}
        {/* <Child /> */}
      </div>
    )
  }
}

class Child extends PureComponent {
  /* componentDidUpdate(nextProps, nextState) {
    console.log(this.props, this.state)
    console.log(nextProps, nextState)
    return !(this.props.carName === nextProps.carName)
  } */

  render() {
    console.log('child - render()')
    return (
      <div className="child">
        <h3>我是Child组件</h3>
        <p>我接到的车: {this.props.carName}</p>
      </div>
    )
  }
}
